<template>
    <backView title="云村" backUrl="/"></backView>
    <div class="content">
        <div v-for="item in state.videoList" :key="item.data.vid">
            <videoCard :title="item?.data?.title" :praisedCount="item?.data?.praisedCount"
                :nickname="item?.data?.creator?.nickname" :coverUrl="item?.data?.coverUrl"
                :avatarUrl="item?.data?.creator?.avatarUrl" />
        </div>
    </div>
</template>

<script setup>
/* eslint-disable */
import backView from '@/components/backView.vue'
import videoCard from '@/components/videoCard.vue'
import { onMounted, reactive } from 'vue'

import { getUserVideo } from '@/api/yunCun'
import { FooterMusicStore } from '@/store/FooterMusic.js'
const store = FooterMusicStore()
const state = reactive({
    videoList: []
})
onMounted(async () => {
    const res = await getUserVideo();
    const { data } = res;
    const { code, datas } = data;
    if (code !== 200) {
        return;
    }
    // console.log('datas--->', datas);
    state.videoList = datas;
})

</script>

<style lang="less" scoped>
.content {
    overflow-x: hidden;
    background: #f2f2f2;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
</style>
